<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_防抖_underscore</title>
</head>
<script src="./underscore.js"></script>
<!-- <script src="./99_封装debounce.js"></script> -->
<body>
  <!-- 
    防抖:
        事件响应函数在一段时间后才执行, 如果在这段时间内再次调用,
        则重新计算执行的时间;
        当预定的时间内没有再次调用该函数, 则执行 request
    应用场景
        1. scroll事件滚动触发
        2. 搜索框输入查询
        3. 表单验证
        4. 按钮提交事件
        5. 浏览器窗口缩放, resize事件
  -->


  <p>
    请你输入搜索的内容: <input id="Inp" type="text">
  </p>
  <button id="btn">取消请求</button>


  <script>
    function debounce(callback, wait, immediate) {
      let timeout, result;
      let debounced = function() {
        const _this = this;
        const args = arguments;
        if(timeout) clearTimeout(timeout);
        if(immediate) {
          // 立即执行
          if(!timeout) result = callback.apply(_this, args);
          timeout = setTimeout(() => timeout = null, wait)
        } else {
          // 不会立即执行
          timeout = setTimeout(function() {
            callback.apply(_this, args);
          }, wait)
        }
        return result;
      }
      debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
      }
      return debounced;
    }


    const Inp = document.getElementById('Inp');
    const Btn = document.getElementById('btn');

    // 封装请求函数
    function request(e) {
      // 改变执行函数内部this的指向
      // console.log(this);
      // event 指向问题
      // console.log(e);
      console.log('立即执行 ajax发请求');
      // return 一个结果
      // return '想要的结果'
    }


    // 设置变量保存 debounce的返回值
    const doSomeThing = debounce(request, 1000, true);
    // console.log(doSomeThing());
    Inp.oninput = doSomeThing
    // Btn.addEventListener('click', doSomeThing.cancel)



    // 使用 underscore
    // 设置变量保存 _.debounce的返回值
    // const _debounce = _.debounce(request, 1000, true);
    // console.log(_debounce());
    // Inp.oninput = _debounce;
    // Btn.addEventListener('click', _debounce.cancel);

  </script>

</body>
</html>